<template>
  <div>
    <div v-if="ListData.length>0" class="box">
      <p class="title">{{title}}</p>
      <router-link
          :to="{ }"
          href="#"
          class="list"
          v-for="(item,index) in ListData"
          :key="item.id"
          :class="{'clear-padding': index%3 == 2}"
          >
        <img :src="item.img">
        <p>{{fliterContent(item.des)}}</p>
        <span>{{addrmb(item.price)}}</span>
      </router-link>
    </div>
    <div v-else>正在加载数据...</div>
  </div>
</template>

<script>
export default {
  name: "ShoppingListView",
  data() {
    return {};
  },
  props: {
    ListData: {
      type: Array,
      default: function() {
        return [];
      }
    },
    title:{
      type: String,
      default: ""
    }
  }, 
  methods: {
    fliterContent(content) {
      if (content.length > 12) {
        return content.substring(0, 11) + "...";
      }
      return content;
    },
    addrmb(content){
      return "¥"+ content
    }
  },
  mounted() {
    console.log(this.listData);
  }
};
</script>
<style scoped lang="less">
.box {
  overflow: auto;
  width: 100%;
  margin: 20px 10px 0 10px;
}
.title {
  color: rgba(23, 24, 24, 1);
  font-size: 0.9rem;
  // margin: 5px 0;
  letter-spacing: 0.1rem;
}

.list {
  width: 29.5%;
  margin-right: 10px;
  float: left;
  margin-top: 10px;
  img {
    width: 100%;
  }
  p {
    font-size: 0.8rem;
  }
  span{
    font-size: 0.8rem
  }
}
// 只能有一个class会覆盖之前的
.clear-padding {
  margin: 0 ;
  margin-top: 10px;
}
</style>